<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="materialEditWinDialogVisible"
      title="修改物料/产品"
      width="70%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editMaterial" label-width="auto">

        <el-form-item style="font-weight: bold;width: 380px;float: left;" label="物料编码">
          <el-input v-model="editMaterial.materialCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="物料名称">
          <el-input v-model="editMaterial.materialName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="规格型号">
          <el-input v-model="editMaterial.specification" type="textarea"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;float: left;" label="单位">
          <el-select v-model="editMaterial.materialUnitCode">
            <el-option v-for="unit in units" :value="unit.unitCode" :label="unit.unitName"/>
          </el-select>
        </el-form-item>

        <el-form-item style="font-weight: bold;width: 400px;margin-left: 600px" label="物料/产品分类">
          <el-tree-select
              v-model="editMaterial.kindId"
              :data="classifys"
              :props="defaultProps"
              node-key="classifyId"
              :check-strictly="true"
              @change="handleSelectChange"
          />
        </el-form-item>

        <el-form-item style="font-weight: bold;float: left" label="是否启用">
          <el-radio-group v-model="editMaterial.materialStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold;margin-left: 600px" label="安全库存">
          <el-radio-group v-model="editMaterial.safeFlag">
            <el-radio :label=1>是</el-radio>
            <el-radio :label=2>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="editMaterial.safeFlag === 1">
          <el-form-item style="font-weight: bold;float: left" label="最小库存量">
            <el-input-number style="width: 220px" min="0" v-model="editMaterial.minStock"/>
          </el-form-item>
          <el-form-item style="font-weight: bold;margin-left: 600px" label="最大库存量">
            <el-input-number style="width: 220px" min="0" v-model="editMaterial.maxStock"/>
          </el-form-item>
        </template>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="editMaterial.materialRemark" type="textarea"/>
        </el-form-item>

      </el-form>

      <el-tabs type="border-card" v-show="1">
        <el-tab-pane label="BOM组成">
          <!-- 工具栏 -->
          <el-row style="margin: 0px 10px;padding: 0px 10px;">
            <el-col :span="24">
              <el-button @click="toAddBom" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
              <el-button @click="toDeletes" type="danger" plain><el-icon><Delete /></el-icon>删除</el-button>
            </el-col>
          </el-row>
          <!--  BOM列表 -->
          <el-row style="margin: 10px 10px;padding:0px 15px;">
            <el-col :span="24">
              <el-table :data="boms" border stripe ref="bomTable">
                <el-table-column type="selection" fixed="left" align="center"/>
                <el-table-column prop="bomMaterialCode" label="物料编码" align="center"/>
                <el-table-column prop="bomMaterialName" label="物料名称" align="center"/>
                <el-table-column prop="bomMaterialSpec" label="规格" align="center"/>
                <el-table-column prop="bomUnitCode" label="单位" align="center"/>
                <el-table-column prop="useScales" label="使用比例" align="center"/>
                <el-table-column prop="remark" label="备注" align="center"/>

                <el-table-column label="操作" fixed="right" align="center">
                  <template #default="scope">
                    <el-link @click="toEditBom(scope.row.bomId)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>修改</el-link>
                    <el-popconfirm width="200"
                                   confirm-button-text="必须删"
                                   cancel-button-text="点错了"
                                   @confirm="deleteBomById(scope.row.bomId)"
                                   title="您确定要删除这条数据吗？">
                      <template #reference>
                        <el-link style="margin: 0px 5px" type="primary">
                          <el-icon><Delete /></el-icon>删除
                        </el-link>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row :span="5" style="margin-left: 680px">
            <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
              共 {{bomTotal}} 条
            </el-col>
            <el-col :span="2" style="padding: 10px">
              <el-pagination @change="changeBomPage" background layout="prev, pager, next" :total="bomTotal"/>
            </el-col>
          </el-row>
          <!-- 新增弹窗组件 -->
          <bomAdd @cancelBomAdd="cancelBomAdd"
                       @add-complete="addBomComplete"
                       :material-id="bomMaterialId"
                       :is-show="addWinIsShow"
                       style="margin-top: 100px"/>
          <!-- 编辑弹窗组件 -->
          <bomEdit :bom-id="editBomId"
                        @cancel-bom-edit="cancelBomEdit"
                        @edit-complete="editComplete"
                        style="margin-top: 30px"/>
        </el-tab-pane>
        <el-tab-pane label="SIP">
          <!-- 工具栏 -->
          <el-row style="margin: 0px 10px;padding: 0px 10px;">
            <el-col :span="24">
              <el-button @click="toAddSip" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
            </el-col>
          </el-row>
          <!--  SIP列表 -->
          <el-row style="margin: 10px 10px;padding:0px 15px;">
            <el-col :span="24">
              <el-table :data="sips" border stripe ref="sipTable">
                <el-table-column prop="sipTitle" label="标题" align="center"/>
                <el-table-column prop="sipOrder" label="展示顺序" align="center"/>
                <el-table-column prop="processName" label="所属工序" align="center"/>
                <el-table-column prop="sipDescription" label="内容说明" align="center"/>
<!--                <el-table-column label="操作" fixed="right" align="center">-->
<!--                  <template #default="scope">-->
<!--                    <el-link @click="toEditSip(scope.row.sipId)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>修改</el-link>-->
<!--                    <el-popconfirm width="200"-->
<!--                                   confirm-button-text="必须删"-->
<!--                                   cancel-button-text="点错了"-->
<!--                                   @confirm="deleteSipById(scope.row.sipId)"-->
<!--                                   title="您确定要删除这条数据吗？">-->
<!--                      <template #reference>-->
<!--                        <el-link style="margin: 0px 5px" type="primary">-->
<!--                          <el-icon><Delete /></el-icon>删除-->
<!--                        </el-link>-->
<!--                      </template>-->
<!--                    </el-popconfirm>-->
<!--                  </template>-->
<!--                </el-table-column>-->
              </el-table>
            </el-col>
          </el-row>
          <el-row :span="5" style="margin-left: 680px">
            <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
              共 {{sipTotal}} 条
            </el-col>
            <el-col :span="2" style="padding: 10px">
              <el-pagination @change="changeSipPage" background layout="prev, pager, next" :total="sipTotal"/>
            </el-col>
          </el-row>
          <!-- 新增弹窗组件 -->
          <sipAdd @cancelSipAdd="cancelSipAdd"
                  @add-sip-complete="addSipComplete"
                  :material-id="sipMaterialId"
                  :is-show="addSipWinIsShow"
                  style="margin-top: 100px"/>
          <!-- 编辑弹窗组件 -->
<!--          <sipEdit :sip-id="editSipId"-->
<!--                   @cancel-sip-edit="cancelSipEdit"-->
<!--                   @edit-complete="editComplete"-->
<!--                   style="margin-top: 30px"/>-->
        </el-tab-pane>
        <el-tab-pane label="SOP">
          <!-- 工具栏 -->
          <el-row style="margin: 0px 10px;padding: 0px 10px;">
            <el-col :span="24">
              <el-button @click="toAddSop" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
            </el-col>
          </el-row>
          <!--  SIP列表 -->
          <el-row style="margin: 10px 10px;padding:0px 15px;">
            <el-col :span="24">
              <el-table :data="sops" border stripe ref="sopTable">
                <el-table-column prop="sopTitle" label="标题" align="center"/>
                <el-table-column prop="sopOrder" label="展示顺序" align="center"/>
                <el-table-column prop="processName" label="所属工序" align="center"/>
                <el-table-column prop="sopDescription" label="内容说明" align="center"/>
                <el-table-column prop="sopUrl" label="图片" align="center">
                  <template #default="scope">
                    <el-image :src="scope.row.sopUrl" />
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </template>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editMaterialSubmit">
          确定
        </el-button>
        <el-button @click="cancelEditMaterial">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref , watch} from 'vue'
import {ElMessageBox,ElMessage} from "element-plus";
import classifyRequest from "@/api/classify.js";
import unitRequest from "@/api/unit.js";
import materialRequest from "@/api/material.js";
import bomRequest from "@/api/bom.js";
import bomAdd from "@/views/md/material/bom-add.vue";
import bomEdit from "@/views/md/material/bom-edit.vue";
import sipRequest from "@/api/sip.js";
import sipAdd from "@/views/md/material/sip-add.vue";
// import sipEdit from "@/views/md/material/sip-edit.vue";
import sopRequest from "@/api/sop.js";
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelMaterialEdit'])
// 弹窗标记
let materialEditWinDialogVisible = ref(false);
// 查询的单位列表
let units = ref([]);
// 定义数组保存所有分类信息
let classifys = ref([]);
// 申明的属性
// materialId: 当前要编辑的物料的编号
let props = defineProps(["materialId"]);
// 编辑的单位对象
let editMaterial = ref({});

// 定义数组保存所有BOM信息
let boms = ref([]);
// 总条数，默认0
let bomTotal = ref(0);
// 当前页码，默认1
let curBomPage = ref(1);
// 查询结果
let bomTable = ref(null);

// 分页事件
function changeBomPage(value) {
  curBomPage.value = value;
  loadBoms(props.materialId);
}

/**
 * 加载BOM列表
 */
function loadBoms(materialId) {
  // 调用API来查询项目列表
  bomRequest.loadBOMs(materialId, curBomPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    bomTotal.value = res.data.total;
    // 将查询的列表赋值给projects
    boms.value = res.data.list;
    console.log(boms)
  })
}

/**
 * 行删除按钮事件
 * @param bomId
 */
function deleteBomById(bomId) {
  bomRequest.deleteBomById(bomId,res => {
    if (res.code === 200) {
      ElMessage.success('删除完成');
      loadBoms(props.materialId);
    }
  });
}

// 当前要编辑的BOM的编号，默认是-1
let editBomId = ref(-1);

/**
 * 行级编辑按钮事件
 * @param bomId
 */
function toEditBom(bomId){
  editBomId.value = bomId;
}

/**
 * 编辑完成的事件
 */
function editComplete(){
  // 更新数据表
  cancelBomEdit();
  loadBoms(props.materialId);
}

/**
 * 编辑取消的事件
 */
function cancelBomEdit(){
  // 将 editBomId 修改为-1
  editBomId.value = -1;
}

//新增窗口
let addWinIsShow = ref(false);
// 当前要编辑的分类的编号，默认是-1
let bomMaterialId;
/**
 * 工具栏新增BOM事件
 */
function toAddBom(){
  bomMaterialId = props.materialId;
  loadBoms(props.materialId);
  addWinIsShow.value = true;
}

/**
 * 新增BOM完成的监听事件
 */
function addBomComplete(){
  cancelBomAdd();
  loadBoms(props.materialId);
}

/**
 * 取消新增的事件
 */
function cancelBomAdd(){
  addWinIsShow.value = false;
  loadBoms(props.materialId);
}

/**
 * 工具栏批量删除按钮事件
 */
function toDeletes(){
  let selectedRows = bomTable.value.getSelectionRows();
  if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要删除选中的项目吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    let bomIds = [];
    selectedRows.forEach(row=>{
      bomIds.push(row.bomId);
    })

    bomRequest.deleteBoms(bomIds,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"成功删除[" + res.data + "]条数据"
        })
        loadBoms(props.materialId);
      }else{
        ElMessage({
          type:"warning",
          message:"删除失败"
        })
      }
    });
  }).catch(()=>{});
}

// 定义数组保存所有 SIP 信息
let sips = ref([]);
// 总条数，默认0
let sipTotal = ref(0);
// 当前页码，默认1
let curSipPage = ref(1);
// 查询结果
let sipTable = ref(null);

// 分页事件
function changeSipPage(value) {
  curSipPage.value = value;
  loadSips(props.materialId);
}

/**
 * 加载 SIP 列表
 */
function loadSips(materialId) {
  // 调用API来查询项目列表
  sipRequest.loadSIPs(materialId, curSipPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    sipTotal.value = res.data.total;
    // 将查询的列表赋值给projects
    sips.value = res.data.list;
    console.log(sips)
  })
}

//新增窗口
let addSipWinIsShow = ref(false);
// 当前要编辑的分类的编号，默认是-1
let sipMaterialId;
/**
 * 工具栏新增BOM事件
 */
function toAddSip(){
  sipMaterialId = props.materialId;
  loadSips(props.materialId);
  addSipWinIsShow.value = true;
}

/**
 * 新增BOM完成的监听事件
 */
function addSipComplete(){
  cancelSipAdd();
  loadSips(props.materialId);
}

/**
 * 取消新增的事件
 */
function cancelSipAdd(){
  addSipWinIsShow.value = false;
  loadSips(props.materialId);
}

// 定义数组保存所有 SOP 信息
let sops = ref([]);
// 查询结果
let sopTable = ref(null);

/**
 * 加载 SOP 列表
 */
function loadSops(materialId) {
  // 调用API来查询项目列表
  sopRequest.loadSOPs(materialId, res => {
    // 这里的res就是后端返回的结
    // 将查询的列表赋值给 sips
    sops.value = res.data;
    console.log(sops)
  })
}

// 设置 el-tree-select 的 props
const defaultProps = {
  children: 'children',
  label: 'classifyName',
  value: 'classifyId' // 使用 classifyId 作为节点的值
};

// 处理选择变化的函数
function handleSelectChange(value, data) {
  console.log('Selected value:', value);
}

/**
 * 取消编辑按钮事件
 */
function cancelEditMaterial(){
  // 将当前的编辑对象置空
  editMaterial = ref({});
  // 关闭窗体
  materialEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelMaterialEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelMaterialEdit")
}

/**
 * 编辑提交
 */
function editMaterialSubmit(){
  classifyRequest.selectById(editMaterial.value.kindId,res => {
    // 更新 editMaterial 的值
    editMaterial.value.kindType = res.data.classifyType;
    editMaterial.value.kindName = res.data.classifyName;

    materialRequest.updateMaterialById(editMaterial.value,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"编辑物料成功"
        });
        // 关闭弹窗
        cancelEditMaterial();
        // 触发编辑完成的事件
        emits('editComplete',res.data);
      } else if (res.data == '物料编码不能为空') {
        ElMessage({
          type:"warning",
          message:"物料编码不能为空"
        });
      } else if (res.data == '物料名称不能为空') {
        ElMessage({
          type:"warning",
          message:"物料名称不能为空"
        });
      } else {
        ElMessage({
          type:"warning",
          message:"修改物料失败"
        });
      }
    });
  });
}

/**
 * 通过materialId加载任务信息
 * @param materialId
 */
function loadMaterialById(materialId){
  materialRequest.selectById(materialId,res=>{
    if(res.data){
      editMaterial.value = res.data;
      // 弹窗
      materialEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.materialId
 * // 每次属性props.materialId发生变化这里都会执行
 */
watch(()=>props.materialId,()=>{
  // 判断unitId是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.materialId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadMaterialById(props.materialId);
    // 加载BOM对象
    loadBoms(props.materialId);
    // 加载 SIP 对象
    loadSips(props.materialId);
    // 加载 SOP 对象
    loadSops(props.materialId);
  }

});

onMounted(()=>{
  // 加载单位对象
  unitRequest.ListUnits(res => {
    // 将查询的列表赋值给units
    units.value = res.data;
  })
  // 加载分类对象
  classifyRequest.getTree(0,res=>{
    classifys.value = res.data;
  })
})
</script>
<style scoped>
</style>